import React from 'react';
import Step from './Step';

import styles from './index.module.css';

const Steps = (props) => {
    const { children, current } = props;
    const length = children.length;

    const renderStep = () => {
        return children.map((item,index)=>{
            const { title, description, subTitle } = item.props;
            return (
                <Step 
                title={title}
                description={description}
                subTitle={subTitle}
                key={index}
                index={index+1}
                current={current}
                length={length}/>
            )
        })
    }

    return (
        <div className={styles['wrap']}>
            {renderStep()}
        </div>
    )
}

Steps.Step = Step;

export default Steps;